import React, { useState } from 'react'
import formimg from '../../assets/Yiqixiu/formimg.png'
import dongimg from '../../assets/Yiqixiu/dongimg.png'
import videoimg from '../../assets/Yiqixiu/video.png'
import hbaoimg from '../../assets/Yiqixiu/hbaoimg.png'
import H5img from '../../assets/Yiqixiu/H5img.png'
import style from './yqworks.module.css'
import { Button } from 'antd'
import { HighlightOutlined, SendOutlined, SettingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
import { HistogramOutline } from 'antd-mobile-icons'
function WorksAll() {
  const itemsall = [
    { id: 1, title: '平安城市征文活动投票评选', date: '2024-09-20', views: 0, vistors: 0, forms: 0, type: '表单', fix: '未发布', color: '#2cb2c3', img: formimg },

    { id: 2, title: '易企秀活动', date: '2024-09-20', views: 0, vistors: 0, forms: 0, type: '互动', fix: '未发布', color: '#f4a827', img: dongimg},

    { id: 3, title: '数字人口播企业宣传公司介绍', date: '2024-09-20', views: 0, vistors: 0, forms: 0, type: '视频', fix: '未发布', color: 'green', img: videoimg},

    { id: 4, title: '心情日签早安拼图正能量问…', date: '2024-09-20', views: 0, vistors: 0, forms: 0, type: '海报', fix: '未发布', color: '#7060ec', img: hbaoimg},

    { id: 5, title: '紫色轻奢唯美时尚品牌商务…', date: '2024-09-20', views: 0, vistors: 0, forms: 0, type: 'H5', fix: '未发布', color: 'blue', img: H5img }
  ]


  // 为每个项目添加一个状态来跟踪hover状态  
  const [hoverIndices, setHoverIndices] = useState(new Set());

  // 处理鼠标进入事件  
  const handleMouseEnter = (index) => {
    setHoverIndices(prev => new Set([...prev, index]));
  };

  // 处理鼠标离开事件  
  const handleMouseLeave = (index) => {
    setHoverIndices(prev => {
      // 将 Set 转换为数组，然后过滤掉 index  
      const newIndices = Array.from(prev).filter(i => i !== index);
      // 将过滤后的数组转换回 Set  
      return new Set(newIndices);
    });
  };
  return (
    <div className={style.alls}>
      {itemsall.map((item, index) => (
        <div
          className={style.all}
          key={item.id}
          onMouseEnter={() => handleMouseEnter(index)}
          onMouseLeave={() => handleMouseLeave(index)}
        >
          <img src={item.img} alt="" />
          <p>
            <Button size="small" style={{ color: item.color, fontSize: '12px' }}>
              {item.type}
            </Button>
          </p>
          <h3>{item.title}</h3>
          <span>{item.date}</span><br /><br />
          <p><b>{item.views}</b>浏览 <b>{item.vistors}</b>访客 <b>{item.forms}</b>表单</p>
          <p className={style.fb}>{item.fix}</p>

          {/* 根据hoverIndices来决定是否渲染hov元素 */}
          {hoverIndices.has(index) && (
            <div className={style.hov}>
              <button className={style.btn}>预览</button>
              <div className={style.p1}>
                <p>
                  <span style={{ fontSize: '20px' }}><HighlightOutlined /></span><br />
                  <span>编辑</span>
                </p>
                <p>
                  <span style={{ fontSize: '20px' }} ><HistogramOutline /></span><br />
                  <span>数据</span>
                </p>
                <p>
                  <span style={{ fontSize: '20px' }}><SendOutlined /></span><br />
                  <span>推广</span>
                </p>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

export default WorksAll
